<template id="shoplist">
  <main>
    <mt-header fixed title="猜你喜欢"></mt-header>
    <ul class="left">
      <li v-for="(item,index) in list" :key="index">{{item.con}}</li>
    </ul>
    <div class="right">
        <li v-for="(item,index) in list" :key="index">
            <img v-for="(item,index) in item.list" :src="item" :key="index">
        </li>
    </div>
  </main>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      msg: "man"
    };
  },
  created() {
    this.get();
  },
  methods: {
    get() {
      var that = this;
      this.$http.get("./src/assets/json/shop.json").then(function(response) {
        console.log(response);
        that.list = response.data.shoplist;
      });
    }
  }
};
</script>


<style scoped>
.left {
  width: 20%;
  float: left;
  height: calc(100vh - 40px - 40px);
  /*滚动条只能出现在ul身上*/
  overflow: scroll;
  text-align: center;
}
.left::-webkit-scrollbar {
  display: none;
}
.left li {
  margin: 10px;
}
.right {
  width: 80%;
  float: right;
  height: calc(100vh - 40px - 40px);
  /*滚动条只能出现在ul身上*/
  overflow: scroll;
}
</style>